<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div aaa="111">111</div>
    <span>222</span>
    <ul>333</ul>
    <p>444</p>
    <script>
        //Document 对象下的对象如下：
        //他们都继承了Element对象，因此Element对象的属性，方法都会被他们继承
        const divObj = document.querySelector("div");
        divObj.getAttribute("..")
        // divObj.onclick 也是继承的Element
        const spanObj = document.querySelector("span");
        const ulObj = document.querySelector("ul");
        const pObj = document.querySelector("p");
        /* 
            总结：标签元素有的属性方法事件大都是从Element中继承过来的
        */
        console.dir(divObj);
        console.dir(spanObj);
        console.dir(ulObj);
        console.dir(pObj);
        console.log(divObj.nodeName);
        console.log("========================")

        /* 
            nodeName：返回当前节点的节点名称
            nodeType: 返回当前节点的类型，用于区分不同节点
            nodeValue:返回或设置当前节点的值，只有文本节点才有值
        */
        console.log(divObj.nodeName);  //DIV
        console.log(divObj.nodeType);  //1
        console.log(divObj.nodeValue); //null

        console.log(pObj.nodeName);    //P
        console.log(pObj.nodeType);    //1
        console.log(pObj.nodeValue);   //null
    </script>
</body>

</html>